<!--  -->
<template>
  <div class='headers'>
    <div>echarts柱形图的使用</div>
    <div id="myCharts" :style="{width: '100%', height: '300px'}"></div>
    <p> 1、安装echarts依赖
      # npm install echarts -S <br>
      2、使用的页面中引入<br>
      import * as echarts from 'echarts'
      <br>
      如图：
      <viewer>
        <img src="../../assets/3.png" alt="" width="100%">
        <img src="../../assets/4.png" alt="" width="100%">
        <img src="../../assets/5.png" alt="" width="100%">
      </viewer>

      这样就可以正常显示了
    </p>
    <div style="width:100%;height:60px"></div>
    <navs></navs>
  </div>
</template>

<script>
  import * as echarts from 'echarts'
  import navs from './navs.vue';
  export default {
    components: {
      navs
    },
    name: '',
    data() {
      //这里存放数据
      return {

      };
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
      this.drawLine();
    },
    //方法集合
    methods: {
      drawLine() {
        // 基于准备好的dom，初始化echarts实例

        let myChart = echarts.init(document.getElementById('myCharts'))
        // 绘制图表

        let option = {
          title: {
            text: '这个是表名'
          },
          legend: {
            data: ['入库数', '出库数']
          },
          xAxis: { //轴名
            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
            axisLabel: {
              show: true, //是否显示刻度标签  xAxis.data  羊毛衫
              textStyle: {
                color: 'red', //更改坐标轴文字颜色
                fontSize: 16, //更改坐标轴文字大小
              },
            },
          },
          tooltip: { //鼠标经过，提示
            trigger: 'axis',
            axisPointer: {
              type: 'cross'
            },
            padding: [5, 10]
          },
          grid: { //组件离容器的距离
            left: '10px',
            right: '10px',
            // top:'10px',
            bottom: '10px',
            containLabel: true //否包含坐标轴的刻度标签
          },
          yAxis: {
            type: 'value'
          },
          //数据 
          series: [{
              type: 'bar', //图的类型line为曲线图
              name: "入库数", //这个与 上面legend 中的data 一至
              data: [8, 25, 10, 19, 15, 20], //数据
              color: ['#40c9c6', '#e69d87'], //柱子颜色
            },
            {
              type: 'bar',
              name: "出库数",
              data: [5, 20, 36, 10, 10, 10],
              color: ['#e69d87', '#8dc1a9'],
            }
          ]
        };
        myChart.setOption(option)
      }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //beforeCreate() {}, //生命周期 - 创建之前
    //beforeMount() {}, //生命周期 - 挂载之前
    //beforeUpdate() {}, //生命周期 - 更新之前
    //updated() {}, //生命周期 - 更新之后
    //beforeDestroy() {}, //生命周期 - 销毁之前
    //destroyed() {}, //生命周期 - 销毁完成
    //activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
  }

</script>
<style lang='' scoped>
  /* @import url(); 引入公共css类 */

</style>
